$f: 19.2;

.home {
  position: relative;
  width: 100%;
  .title_50 {
    font-size: 50/$f+vw;
    font-weight: bold;
  }
  .dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
    display: none;
    z-index: 1003;

    .close {
      position: absolute;
      right: 5%;
      top: 5%;
      cursor: pointer;
      z-index: 100;

      img {
        width: 30/$f+vw;
      }
    }

    .content {
      width: 100%;

      video {
        width: 80%;
        height: 80vh;
        object-fit: cover;
        display: block;
        margin: 0 auto;
      }
    }
  }

  .b_link {
    background: #F5F5F5;
    padding: 15/$f+vw 210/$f+vw;
    margin-top: 120/$f+vw;
    display: flex;
    align-items: center;

    a,
    p {
      color: #666;
      font-size: 16/$f+vw;
    }

    span {
      margin: 0 10/$f+vw;
    }
  }

  .banner {
    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }
  }

  .section1 {
    margin: -260/$f+vw 210/$f+vw 166/$f+vw 210/$f+vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    position: relative;
    .l {
      width: 596/$f+vw;

      .name {
        color: #FFF;
        font-size: 70/$f+vw;
        font-weight: 700;
        line-height: 1.1;

        span {
          color: #00B58A;
        }
      }

      .des {
        margin: 49/$f+vw 0 27/$f+vw 0;
        color: #666;
        font-size: 16/$f+vw;
      }
    }

    .r {
      img {
        width: 750/$f+vw;
        height: 500/$f+vw;
      }
    }
  }

  .section2 {
    margin: 0 210/$f+vw 167/$f+vw 210/$f+vw;
    position: relative;

    .l {
      position: relative;
      width: fit-content;

      img {
        width: 980/$f+vw;
        display: block;
        object-fit: cover;
      }

      .play {
        position: absolute;
        left: 50%;
        top: 50%;
        border: 7/$f+vw solid #00B58A;
        background: white;
        width: 58/$f+vw;
        height: 58/$f+vw;
        border-radius: 50%;
        display: flex;
        align-items: center;
        cursor: pointer;
        justify-content: center;
        transform: translate(-50%, -50%);

        svg {
          width: 19/$f+vw;
          display: block;
        }
      }
    }

    .info {
      position: absolute;
      right: 0;
      width: 620/$f+vw;
      height: 440/$f+vw;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 15/$f+vw;
      background: #00B58A;
      padding: 120/$f+vw 42/$f+vw;
      color: white;

      .p1 {
        font-size: 50/$f+vw;
        font-weight: 700;
      }

      .des {
        font-size: 18/$f+vw;
        margin-top: 20/$f+vw;
      }
    }
  }

  .section3 {
    margin: 0 210/$f+vw;

    .allItems {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0 20/$f+vw;

      .item {
        display: block;
        width: 100%;
        border-radius: 3/$f+vw;
        border: 1px solid #CFCFCF;
        padding: 12/$f+vw;

        .pic {
          overflow: hidden;

          img {
            width: 100%;
            display: block;
            object-fit: cover;
            height: 200/$f+vw;
            transition: all 600ms;
          }
        }

        .text {
          margin: 25/$f+vw 14/$f+vw 0 14/$f+vw;

          .p1 {
            color: #000;
            font-size: 25/$f+vw;
            font-weight: 700;
          }

          .des {
            margin: 15/$f+vw 0 60/$f+vw 0;
            color: #666;
            font-size: 16/$f+vw;
            height: 92/$f+vw;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
          }
        }

        &:hover {
          .pic {
            img {
              transform: scale(1.05);
            }
          }
        }
      }
    }
  }


  .section4{
     margin: 174/$f+vw 210/$f+vw 218/$f+vw 210/$f+vw;
     position: relative;
     .prev{
      position: absolute;
      left: -60/$f+vw;
      top:50%;
      transform: translateY(-50%);
      cursor: pointer;
      z-index: 10;
      svg{
        width: 47/$f+vw;
      }
     }
     .next{
      position: absolute;
      right: -60/$f+vw;
      top:50%;
      transform: translateY(-50%);
      cursor: pointer;
      z-index: 10;
      svg{
        width: 47/$f+vw;
      }
     }
     .swiper{
      width: 100%;
      .pic{
        img{
          width: 100%;
          display: block;
          object-fit: cover;
          height: 476/$f+vw;
          border-radius: 15/$f+vw;
        }
      }
     }
  }

  .section5{
    margin: 0 210/$f+vw;
    .t{
      color: #000;
      font-size: 50/$f+vw;
      font-weight: 700;
      margin-bottom: 28/$f+vw;
    }
    .table{
      text-align: center;
      img{
        width: 100%;
        object-fit: contain;
      }
    }
  }

  .section6{
    margin: 123/$f+vw 210/$f+vw 0 210/$f+vw;
    .t{
      color: #000;
      font-size: 50/$f+vw;
      font-weight: 700;
      margin-bottom: 40/$f+vw;
    }
    .allItems {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0 60/$f+vw;

      .item {
        display: block;
        width: 100%;
        border-radius: 3/$f+vw;
        border: 1px solid #CFCFCF;
        padding: 12/$f+vw;

        .pic {
          overflow: hidden;

          img {
            width: 100%;
            display: block;
            object-fit: cover;
            height: 260/$f+vw;
            transition: all 600ms;
          }
        }

        .text {
          margin: 25/$f+vw 14/$f+vw 0 14/$f+vw;

          .p1 {
            color: #000;
            font-size: 26/$f+vw;
            font-weight: 700;
          }

          .des {
            margin: 15/$f+vw 0 50/$f+vw 0;
            color: #666;
            font-size: 16/$f+vw;
            line-height: 1.625;
          }
        }

        &:hover {
          .pic {
            img {
              transform: scale(1.05);
            }
          }
        }
      }
    }
  }

  .section7 {
    margin: 130/$f+vw 210/$f+vw 133/$f+vw 210/$f+vw;
    display: flex;
    justify-content: space-between;

    .item {
      width: 49%;
      padding: 52/$f+vw 48/$f+vw;
      color: white;
      border-radius: 15/$f+vw;

      .p1 {
        font-weight: 700;
      }

      .p2 {
        font-size: 26/$f+vw;
        margin-top: 10/$f+vw;
      }

      a {
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          width: 28/$f+vw;
          height: 28/$f+vw;
          background-color: #00B58A;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          svg {
            width: 15/$f+vw;

            path {
              transition: all 600ms;
            }
          }
        }

        p {
          color: #FFF;
          font-size: 14/$f+vw;
          margin-left: 14/$f+vw;
        }
      }

      .pic {
        img {
          transition: all 600ms;
        }
      }

      &:hover {
        .pic {
          img {
            transform: scale(1.05);
          }
        }
      }
    }

    .item:nth-child(1) {
      background: #2E2E2E url('../images/line.png') no-repeat;

      .pic {
        margin: 112/$f+vw 0 49/$f+vw 85/$f+vw;
        img {
          max-width: 100%;
          height: 310/$f+vw;
          object-fit: contain;
        }
      }
    }

    .item:nth-child(2) {
      background: #00B58A;

      .pic {
        margin: 105/$f+vw 0 49/$f+vw 156/$f+vw;

        img {
          max-width: 100%;
          object-fit: contain;
        }
      }

      a {
        span {
          background: white;

          svg {
            path {
              fill: #00B58A;
            }
          }
        }
      }
    }
  }


  @media screen and (max-width: 1024px) {
    .dialog {
      .close {
        top: 80px;

        img {
          width: 30px;
        }
      }

      .content {
        video {
          height: 60vh;
        }
      }
    }
    padding-top: 60px;
    .b_link{
      margin-top: 0;
      padding: 15px 5%;
      a,span,p{
        font-size: 14px;
      }
      span{
        margin: 0 5px;
      }
    }
    .section1{
      margin: 30px 5%;
      flex-direction: column;
      .l{
        width: 100%;
        .name{
          font-size: 24px;
          color:#000;
          line-height: 1.3;
        }
        .des{
          font-size: 16px;
          margin: 20px 0 10px 0;
        }
      }
      .r{
        width: 100%;
        margin-top: 20px;
        img{
          max-width: 100%;
          width: auto;
          height: auto;
        }
      }
    }
    .section2{
       margin: 30px 5%;
       .l{
        img{
          width: 100%;
        }
        .play{
          width: 50px;
          height: 50px;
          border: 7px solid #00B58A;
          svg{
            width: 12px;
          }
        }
       }
       .info{
        position: static;
        width: 100%;
        transform: translateY(0);
        padding: 60px 20px;
        height: auto;
        .p1{
          font-size: 36px;
        }
        .des{
          font-size: 16px;
          margin-top: 10px;
        }
       }
    }
    .section3{
      margin: 0 5%;
      .allItems{
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
        .item{
          padding: 10px ;
          .pic{
            img{
              height: 150px;
            }
          }
          .text{
            margin: 15px 10px;
            .p1{
              font-size: 18px;
            }
            .des{
              font-size: 16px;
              height: auto;
              margin: 10px 0 30px 0;
            }
          }
        }
      }
    }

    .section4{
      margin: 40px 5%;
      .prev,.next{
        svg{
          width: 30px;
        }
      }
      .swiper{
        .pic{
          img{
            height: 218px;
          }
        }
      }
    }

    .section5{
      margin: 0 5%;
      .t{
        font-size: 24px;
        margin-bottom: 20px;
      }
    }

    .section6{
      margin: 40px 5%;
      .t{
        font-size: 24px;
        margin-bottom: 20px;
      }
      .allItems{
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
        .item{
          padding: 10px ;
          .pic{
            img{
              height: 150px;
            }
          }
          .text{
            margin: 15px 10px;
            .p1{
              font-size: 18px;
            }
            .des{
              font-size: 16px;
              height: auto;
              margin: 10px 0 30px 0;
            }
          }
        }
      }
    }
    .section7{
      margin: 40px 5%;
      flex-direction: column;
      .item{
        width: 100%;
        margin-bottom: 20px;
        padding: 20px;
        border-radius: 10px;
        .p1{
          font-size:24px ;
        }
        .p2{
          font-size: 14px;
          margin-top: 10px;
        }
        a{
          span{
            width: 25px;
            height: 25px;
            svg{
              width: 20px;
            }
          }
          p{
            font-size: 16px;
            margin-left: 10px;
          }
        }
      }
      .item:nth-child(1){
        .pic{
          img{
            height: auto;
          }
        }
      }
    }
  }
}